<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script src="../jquery/jquery-1.5.1.js"></script>
  <script type="text/javascript" src="./jquery.validate.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
.success{background: url("../dtree/img/plus.gif" no-repeat);}
</style>
  <script>
  $(document).ready(function(){
    $("#commentForm").validate({
    	focusCleanup: true,
    	errorElement: "em",
		errorPlacement: function(error, element) {//添加错误信息到显示位置
			$("#" + element.attr("id") + "Tip").html(error);
		},
		success: function(label) {
			label.text("ok").addClass("success");
		},
		rules: {
			cname: {required: true,minlength: 3,maxlength: 18,remote:"./aa.json"},
			password: {required: true,minlength: 3,maxlength: 18},
			phone: {required: true,minlength: 11,maxlength: 12,number: true},
			email: {required: true,minlength: 11,maxlength: 12,number: true},
			company_name: {required: true,minlength: 11,maxlength: 11,number: true},
			file: {required: true},
			comment: {required: true,maxlength: 2,number: true}
		},
		messages: {
			email: {
				onshow: "请输入邮箱,例:jiangsan@mail.com",
				required: 'Enter this!'
			}
		},
		submitHandler: function(form) {
			alert("Correct captcha!");
			form.submit();
			return false;
		},
		onkeyup: false
	});
  });
  </script>

</head>
<body>
  

 <form class="cmxform" id="commentForm" method="post" action="">
 <fieldset>
   <legend>A simple comment form with submit validation and default messages</legend>
   <table>
   	<tr>
   		<td>用户名<em>*</em>:</td>
   		<td><input id="cname" name="cname" size="25" /></td>
   		<td id="cnameTip"></td>
   	</tr>
   	<tr>
   		<td>密码<em>*</em>:</td>
   		<td><input id="password" name="password" size="25"  /></td>
   		<td id="passwordTip"></td>
   	</tr>
   	<tr>
   		<td>手机<em>*</em></td>
   		<td><input id="phone" name="phone" size="25" /></td>
   		<td id="phoneTip"></td>
   	</tr>
   	<tr>
   		<td>E-Mail<em>*</em></td>
   		<td><input id="email" name="email" size="25"/></td>
   		<td id="emailTip"></td>
   	</tr>
   	<tr>
   		<td>公司名<em>*</em></td>
   		<td><input id="companyName" name="companyName" size="25" /></td>
   		<td id="companyNameTip"></td>
   	</tr>
   	<tr>
   		<td>营业执照<em>*</em></td>
   		<td><input type="file" id="file" name="file" size="25" /></td>
   		<td id="fileTip"></td>
   	</tr>
   	<tr>
   		<td>简介</td>
   		<td><textarea id="comment" name="comment" ></textarea></td>
   		<td><span id="commentTip">sfda</span></td>
   	</tr>
   </table>
   <p>
     <input class="submit" type="submit" value="Submit"/>
   </p>
 </fieldset>
 </form>
 
 <hr/>
 
 <script type="text/javascript">
	// extend the current rules with new groovy ones
	
	// this one requires the text "buga", we define a default message, too
	$.validator.addMethod("buga", function(value) {
		return value == "buga";
	}, 'Please enter "buga"!');
	
	// this one requires the value to be the same as the first parameter
	$.validator.methods.equal = function(value, element, param) {
		return value == param;
	};
	
	$().ready(function() {
		var validator = $("#texttests").bind("invalid-form.validate", function() {
			$("#summary").html("Your form contains " + validator.numberOfInvalids() + " errors, see details below.");
		}).validate({
			focusCleanup: true,
			debug: true,
			errorElement: "em",//包装错误的dom标签
			errorContainer: $("#warning, #summary"),//错误容器,会自动显示隐藏,内容固定也可动态改变,如summary的内容
			errorPlacement: function(error, element) {//添加错误信息到显示位置
				error.appendTo( element.parent("td").next("td") );
			},
			success: function(label) {//内容输入正确的显示
				label.text("ok!").addClass("success");
			},
			rules: {
				number: {
					required:true,
					minlength:3,
					maxlength:15,
					number:true	
				},
				secret: "buga",
				math: {
					equal: 11	
				},
				qq: {
					required: true,
					minlength: 3,
					maxlength: 18
				}
			}
		});
		
	});
</script>

<style type="text/css">
form.cmxform { width: 50em; }
em.error {
  background:url("images/unchecked.gif") no-repeat 0px 0px;
  padding-left: 16px;
}
em.success {
  background:url("images/checked.gif") no-repeat 0px 0px;
  padding-left: 16px;
}

form.cmxform label.error {
	margin-left: auto;
	width: 250px;
}
em.error { color: black; }
#warning { display: none; }
</style>
 <form class="cmxform" id="texttests" method="get" action="foo.html">
	<h2 id="summary"></h2>

	<fieldset>
		<legend>Example with custom methods and heavily customized error display</legend>
		<table>
			<tr>
				<td><label for="number">textarea</label></td>
				<td><input id="number" name="number"
					title="Please enter a number with at least 3 and max 15 characters!" />
				</td>
				<td></td>
			</tr>
			<tr>
				<td><label for="secret">Secret</label></td>
				<td><input name="secret" id="secret" /></td>
				<td></td>
			</tr>
			<tr>
				<td><label for="math">7 + 4 = </label></td>
				<td><input id="math" name="math" title="Please enter the correct result!" /></td>
				<td></td>
			</tr>
			<tr>
	   		<td>qq</td>
	   		<td><input id="qq" name="qq" size="25" /></td><td></td>
   	</tr>
		</table>
		<input class="submit" type="submit" value="Submit"/>
	</fieldset>
</form>

<h3 id="warning">Your form contains tons of errors! Please try again.</h3>
</body>
</html>